<template>
  <div>
    <AModal
      v-bind="$attrs"
      width="800px"
      @close="modalEvent('close')"
      @ok="modalEvent('ok')"
      @open="modalEvent('open')"
      @cancel="modalEvent('cancel')"
    >
      <AForm ref="formRef" :model="form" auto-label-width>
        <ARow :gutter="10">
          <ACol :span="12">
            <AFormItem
              field="employeeId"
              label="员工"
              :rules="[{ required: true, message: '请选择员工' }]"
              :validate-trigger="['change', 'blur']"
            >
              <ASelect
                v-model="form.employeeId"
                :disabled="(attrs.title as string).includes('修改')"
                placeholder="员工"
                allow-clear
              >
                <AOption
                  v-for="(item, index) in employeeList"
                  :key="index"
                  :label="item.employeeName"
                  :value="item.employeeId"
                ></AOption>
              </ASelect>
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="baseSalaryAmt" label="基本工资">
              <AInputNumber
                v-model="form.baseSalaryAmt"
                model-event="input"
                placeholder="基本工资"
                hide-button
                :precision="1"
                :step="0.1"
              />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="saleCommissionAmt" label="销售提成">
              <AInputNumber
                v-model="form.saleCommissionAmt"
                model-event="input"
                placeholder="销售提成"
                hide-button
                :precision="1"
                :step="0.1"
              />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="pieceCommissionAmt" label="计件提成">
              <AInputNumber
                v-model="form.pieceCommissionAmt"
                model-event="input"
                placeholder="计件提成"
                hide-button
                :precision="1"
                :step="0.1"
              />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="deliveryOmmissionAmt" label="送货提成">
              <AInputNumber
                v-model="form.deliveryOmmissionAmt"
                model-event="input"
                placeholder="送货提成"
                hide-button
                :precision="1"
                :step="0.1"
              />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="otherAmt" label="其他">
              <AInputNumber
                v-model="form.otherAmt"
                model-event="input"
                placeholder="其他"
                hide-button
                :precision="1"
                :step="0.1"
              />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="overtimeAmt" label="加班">
              <AInputNumber
                v-model="form.overtimeAmt"
                model-event="input"
                placeholder="加班"
                hide-button
                :precision="1"
                :step="0.1"
              />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="attendanceAmt" label="考勤奖">
              <AInputNumber
                v-model="form.attendanceAmt"
                model-event="input"
                placeholder="考勤奖"
                hide-button
                :precision="1"
                :step="0.1"
              />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="expendAmt" label="支取">
              <AInputNumber
                v-model="form.expendAmt"
                model-event="input"
                placeholder="支取"
                hide-button
                :precision="1"
                :step="0.1"
              />
            </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="totalAmt" label="合计"> {{ formatPrice(form.totalAmt) }} </AFormItem>
          </ACol>
          <ACol :span="12">
            <AFormItem field="bankAccount" label="状态">
              <ASelect v-model="form.status" placeholder="状态" allow-clear>
                <AOption label="已发放" :value="1"></AOption>
                <AOption label="未发放" :value="0"></AOption>
              </ASelect>
            </AFormItem>
          </ACol>
          <ACol>
            <AFormItem field="attachFiles" label="附件">
              <upload v-model:attachFiles="attachFiles"></upload>
            </AFormItem>
          </ACol>
          <ACol>
            <AFormItem field="remark" label="备注">
              <ATextarea v-model="form.remark" placeholder="备注"></ATextarea>
            </AFormItem>
          </ACol>
        </ARow>
      </AForm>
    </AModal>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import {
  editSalarySheetDetail,
  getSalarySheetDetail,
  SalarySheetDetailReq,
  SalarySheetDetailResItem
} from '@renderer/api/salarySheet'
import upload from '@renderer/components/upload/index.vue'
import { useMenuState } from '@renderer/store'
import { formatPrice } from '@renderer/utils/mixins'
import { EmployeeResItem, getEmployeeAllList } from '@renderer/api/employee'
import { FileListType } from '@renderer/types/global'
import { differenceBy, isEmpty } from 'lodash-es'
import { batchDelUploadFile } from '@renderer/api/common'

interface Props {
  [key: string]: any
  checkData?: Partial<SalarySheetDetailResItem>
  payrollId: string
}
const props = withDefaults(defineProps<Props>(), {
  checkData: () => {
    return {}
  },
  payrollId: ''
})
const emit = defineEmits(['update:visible', 'reload'])
const attrs = useAttrs()
const formRef = ref()
const form = ref<SalarySheetDetailReq>({
  baseSalaryAmt: 0,
  saleCommissionAmt: 0,
  pieceCommissionAmt: 0,
  deliveryOmmissionAmt: 0,
  otherAmt: 0,
  overtimeAmt: 0,
  attendanceAmt: 0,
  expendAmt: 0,
  totalAmt: 0,
  status: 0,
  remark: '',
  fileList: []
})
const attachFiles = ref<FileListType[]>([])
const menuParam = useMenuState()
const employeeList = ref<EmployeeResItem[]>([])

// 获取客户列表
const getEmployeeList = () => {
  getEmployeeAllList({}).then((res) => {
    employeeList.value = res.data.list
  })
}
// 获取详情
const getDetail = () => {
  getSalarySheetDetail({ payrollMemberId: props.checkData.payrollMemberId! }).then((res) => {
    form.value = res.data
    form.value.payrollId = props.payrollId
    attachFiles.value = [...form.value.fileList]
  })
}

// 弹窗事件
const modalEvent = (type: string) => {
  switch (type) {
    case 'ok':
      formRef.value.validate(async (errors: any) => {
        if (!errors) {
          const delFile = differenceBy(form.value.fileList, attachFiles.value)
          const delFileIds = delFile.map((item) => item.fileId)
          form.value.fileList = attachFiles.value
          // 新增
          if ((attrs.title as string).includes('新增')) {
            form.value.payrollMemberId = undefined
          }
          if (!isEmpty(delFileIds)) {
            await batchDelUploadFile({ fileIdList: delFileIds })
          }
          editSalarySheetDetail(form.value).then(() => {
            Message.success((attrs.title as string).includes('新增') ? '新增成功' : '修改成功')
            modalEvent('cancel')
            emit('reload')
          })
        }
      })
      break
    case 'close':
      menuParam.switchEditStatus(false)
      formRef.value.resetFields()
      emit('update:visible', false)
      break
    case 'open':
      menuParam.switchEditStatus(true)
      getEmployeeList()
      if (attrs.title === '修改') {
        getDetail()
      }
      break
    case 'cancel':
      formRef.value.resetFields()
      menuParam.switchEditStatus(false)
      emit('update:visible', false)
      break
    default:
      break
  }
}
</script>
<style scoped>
.card-container {
  margin-bottom: 10px;
}
</style>
